<template>
    <div id="balance">
        <div class="bos">
            <span class="one-right"><router-link to="/surplusRule" style="color:#969696;display: flex;align-items: center;">余额说明<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more@2x.png" style=" width: .16rem;height: .28rem;margin-left: .1rem;"></router-link></span>
            <span class="center">当前余额</span>
            <p class="img">{{money}}</p >
            <button class="btn" @click="goOpactive">提现</button>
        </div>
    <div class="space"></div>
    <div class="two">
        <ul>
           <li @click="change(1)" :class="flag==1?'active':''" >交易明细</li>
           <li @click="change(2)" :class="flag==2?'active':''">提现记录</li>
        </ul>
    </div>
    <div class="noMoney" v-if="show" style="overflow: hidden;">
       <p>还没有记录哦,快去帮砍赚钱吧</p>
    </div>
    <div class="yes" v-else v-for="x in DrawMoneyList" :id="x.id">
		<ul>
			<li class="reward">{{x.msg}}</li>
			<li class="times">{{x.time}}</li>
		</ul>
		<span class="change" :style=" /[-]/g.test(x.value)==true?'color:#323232':'color:#9948c3'">{{x.value}}</span>
	</div>
    <div class="opac" v-if="opaction" @click="goBack"></div>
    <div class="textOpac" v-if="text">
        <input id="inp" type="number" placeholder="请输入提现金额" class="inp" v-model="DrawMoney"  onkeyup="value=value.replace(/\.\d{2,}$/,value.substr(value.indexOf('.'),3))">
        <p>余额满1元才可以提现哦</P>
        <div class="sBtn">
            <button @click="goLast" style="border-right:1px solid #e6e6e6;">我再想想</button>
            <button @click="goSucc">立即提现</button>
        </div>
    </div>
    <div class="textOpac" v-if="showText">
        <p style="font-size:.32rem;color:#323232;padding: 20% 0;">{{MoneyText}}</P>
    </div>
    <div class="textOpac" v-if="showNo">
        <p style="font-size:.32rem;color:#323232;padding: 20% 0;">提现金额有误</P>
    </div>
</div>
</template>


<script>
    import config from "../config/config.js";
    import share from "../share/share.js";
    import MtaH5 from 'mta-h5-analysis';
    export default{
        data(){
            return{
                show:Boolean,
                flag : 1,
                opaction: false,
                text:false,
                showText:false,
                money:'',
                DrawMoney:'',
                DrawMoneyList:[],
                showNo:false,
                MoneyText:''
            }
        },
        methods:{
            goClick(){
                this.showNo = true
            },
            goLast(){
                this.opaction = false,
                this.text = false
            },
            goOpactive(){
                this.opaction = true,
                this.text = true;
                this.DrawMoney
            },
            goSucc(){
                if(Number(this.DrawMoney)<1){
                    this.text = false;
                    this.showNo = true;
                }else if(Number(this.DrawMoney)>Number(this.money)){
                    this.showNo = true;
                    this.opaction = true;
                    this.text = false;
                }else{
                    this.WithDrawMoney(this.DrawMoney,1)
                }

            },
            goBack(){
                this.opaction = false,
                this.text = false,
                this.showText = false,
                this.showNo = false
            },
            change:function(a){
    		    this.flag=a;
    		    this.ShowMyMoney(a);
            },
            ShowMyMoney(type){
                var value=JSON.stringify({"type":type,"page":1,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Money/ShowMyMoney',{
                        value:value,
                        key:key

                },config)
                    .then(function(response) {
                        this.money=response.data.data.money;
                        if(response.data.data.data==''){
                            this.DrawMoneyList=[];
                            this.show=true;
                        }else{
                            this.DrawMoneyList=response.data.data.data;
                            this.show=false;
                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            WithDrawMoney(money,type){
                var value=JSON.stringify({"money":money,"type":type,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/money/WithDrawMoney',{
                        value:value,
                        key:key

                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            this.showNo = false;
                            this.MoneyText='提现红包已发至公众号';
                            this.showText = true;
                            this.text = false;
                            this.ShowMyMoney(this.flag)
                        }else{
                            this.showNo = false;
                            this.MoneyText=response.data.msg;
                            this.showText = true;
                            this.text = false;
                            this.ShowMyMoney(this.flag)
                        }

                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        activated(){
            this.ShowMyMoney(this.flag);
            share({});
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
        }
    }
</script>

<style>
    
</style>